import { numFormat } from '@/utils/utils';
import { DoubleRightOutlined } from '@ant-design/icons';
import { ProList } from '@ant-design/pro-components';
import { Tag } from 'antd';
import * as moment from 'moment';
import { TimeChangeLog } from '../../types.d';
import styles from '../style.less';

const ChangeTimeItem = (props: { item: TimeChangeLog }) => {
  const { item } = props;
  return (
    <div className={styles.plateLog}>
      <div className={styles.desc}>
        <span>操作人员:</span>
        <span>{item.operUserName || item.operUser}</span>
      </div>
      <div className={styles.desc}>
        <span>操作时间:</span>
        <span>{moment(item.operTime).format('YYYY-MM-DD HH:mm:ss')}</span>
      </div>
      <div className={styles.time}>
        <span className={styles.info}>
          驶入时间：
          <Tag color="blue">{moment(item.prevInTime).format('YYYY-MM-DD HH:mm:ss')}</Tag>{' '}
          <DoubleRightOutlined style={{ color: 'green', marginRight: '5px' }} />{' '}
          <Tag color="geekblue">{moment(item.currInTime).format('YYYY-MM-DD HH:mm:ss')}</Tag>
        </span>
        <span className={styles.info}>
          驶出时间：
          <Tag color="blue">
            {item.prevOutTime ? moment(item.prevOutTime).format('YYYY-MM-DD HH:mm:ss') : '尚未驶出'}
          </Tag>{' '}
          <DoubleRightOutlined style={{ color: 'green', marginRight: '5px' }} />{' '}
          <Tag color="geekblue">
            {item.currOutTime ? moment(item.currOutTime).format('YYYY-MM-DD HH:mm:ss') : '尚未驶出'}
          </Tag>
        </span>
        <span className={styles.info}>
          订单金额：<Tag color="blue">{numFormat(item.prevPayableAmount / 100)}</Tag>{' '}
          <DoubleRightOutlined style={{ color: 'green', marginRight: '5px' }} />{' '}
          <Tag color="geekblue">{numFormat(item.currPayableAmount / 100)}</Tag>元
        </span>
      </div>
    </div>
  );
};

const ChangeTimeList = (props: { changeList: TimeChangeLog[] }) => {
  const { changeList } = props;
  return (
    <ProList
      ghost
      itemCardProps={{ ghost: true }}
      grid={{ gutter: 2 }}
      metas={{ content: {} }}
      dataSource={changeList.map((item) => ({ content: <ChangeTimeItem item={item} /> }))}
    />
  );
};

export default ChangeTimeList;
